<!-- 编辑人员 -->
<template>
  <div class="backRole">
    <div class="roleBtn">
      <Button type="warning" size="small" @click="delRole">删除角色</Button>
      <Button type="primary" size="small" style="margin-left: 10px" @click="createRole">添加角色</Button>
    </div>

    <div class="roleList" v-if="roleData.length">
      <CheckboxGroup v-model="checkChoose" @on-change="checkChange">
        <div class="roleListCon" v-for="(item, index) in roleData" :key="index">
          <div class="checkKuang">
            <Checkbox :label="index">
              <span></span>
            </Checkbox>
          </div>
          <Form ref="formCustom" :label-width="100">
            <FormItem label="角色名称：" required>
              <Select
                style="width: 200px"
                v-model="item.roleVO.id"
                :label-in-value="true"
                :disabled="item.id != ''"
                @on-select="(e) => roleChoose(e, item, index)">
                <Option
                  v-for="option in roleList"
                  :value="option.roleId"
                  :key="option.userId"
                  :label="option.roleName" />
              </Select>
              <em @click="jurisdictionEidt(item, index)">编辑权限</em>
            </FormItem>

            <FormItem label="对应组织：" required>
              <div v-for="(organ, organIndex) in item.orgList" :key="organIndex" class="organBox">
                <span>{{ organ.name }}{{ organ.hasOrgFlag ? `(积分组织)` : '' }}</span>

                <!-- <div v-if="organ.block"> -->
                <div v-if="organ.block">
                  <em @click="organRemove(item.orgList, organIndex, organ, index, item.orgSopBindingVO)">
                    移除
                  </em>
                  <em v-if="!organ.current" @click="integralSetting(organ, item.orgSopBindingVO, index)">
                    {{ organ.hasOrgFlag ? '取消积分组织' : '设为积分组织' }}
                  </em>
                </div>
              </div>
              <i @click="addOrgan(item, index)">
                <Icon type="md-add-circle" />
                添加组织权限
              </i>
            </FormItem>

            <FormItem label="体外案场：">
              <p>
                <Tag
                  v-for="(build, index) in item.buildingList"
                  :key="index"
                  closable
                  @on-close="buildRemove(item.buildingList, build.id, 'caseFlag')">
                  {{ build.name }}
                </Tag>
              </p>
              <i @click="addVitro(item, index)">
                <Icon type="md-add-circle" />
                添加体外案场
              </i>
            </FormItem>

            <FormItem
              label="SOP积分归属组织："
              required
              v-if="item.orgSopBindingVO && item.orgSopBindingVO.length">
              <div class="integralBox" v-for="(sopItem, sopIndex) in item.orgSopBindingVO" :key="sopIndex">
                <div class="integralTit">
                  {{ sopItem.sopOrgName }}
                  <span @click="integralBj(index, sopIndex, sopItem.authOrgList, sopItem.sopOrgName)">
                    编辑
                  </span>
                </div>
                <div class="integralCon">
                  <span v-for="(sopChildItem, sopChildIndex) in sopItem.authOrgList" :key="sopChildIndex">
                    {{ sopChildItem.name }}
                  </span>
                </div>
              </div>
            </FormItem>
          </Form>
        </div>
      </CheckboxGroup>
    </div>

    <div class="noData" v-else>该人员暂无后台角色，如需添加，请点击右上角“添加角色”按钮</div>

    <Modal v-model="jurisdictionFlag" title="编辑权限" width="800">
      <div class="tree">
        <Tree :data="data2" show-checkbox check-strictly check-directly @on-check-change="pcSelChange"></Tree>
      </div>
      <div slot="footer">
        <Button type="text" @click="jurisdictionCancel">取消</Button>
        <Button type="primary" @click="jurisdictionSave">确定</Button>
      </div>
    </Modal>

    <Modal v-model="vitroFlag" title="添加体外案场" width="800" :footer-hide="true" @on-cancel="vitroCancel">
      <div class="tab">
        <div class="vitroSearch">
          <AutoComplete v-model="vitroHousesName" clearable @on-search="remoteMethodHouses">
            <Option v-for="(option, index) in optionsHouse" :value="option.value" :key="index">
              {{ option.label }}
            </Option>
          </AutoComplete>
          <Button type="primary" style="margin-left: 10px" @click="vitroSearch">搜索</Button>
        </div>
        <div class="chooseCase">
          <p>体外案场：</p>
          <div class="chooseCaseTag">
            <Tag
              v-for="(build, index) in vitroBuildCopy.buildingList"
              :key="index"
              closable
              @on-close="buildRemove(vitroBuildCopy.buildingList, build.id)">
              {{ build.name }}
            </Tag>
          </div>
        </div>
        <dt-grid ref="table" :select="select" :columns="vitroColumn" page :onFetch="onFetch" />
      </div>

      <div class="transferFooter">
        <Button @click="vitroCancel">取消</Button>
        <Button type="info" @click="vitroOk">确定</Button>
      </div>
    </Modal>

    <change-organiza ref="changeOrganiza" @chooseOrgEvent="chooseOrgEvent" />

    <integral-set ref="integralSet" @chooseOrg="chooseOrg"></integral-set>
  </div>
</template>

<script>
  import changeOrganiza from './changeOrganiza.vue'
  import jurisdictionMgr from '@/biz/jurisdiction/jurisdiction'
  import roleMgr from '@/biz/role/role'
  import organApi from '@/biz/backStage/organizationManagement'
  import caseMgr from '@/biz/crimeSceneList'
  import vitroColumn from '../opt/vitroColumns'
  import integralSet from './integralSet.vue'
  export default {
    props: ['messInfo'],
    components: { changeOrganiza, integralSet },
    data() {
      return {
        chooseCheck: [],
        jurisdictionFlag: false,
        jurisdictionCurrent: '',
        jurisdictionList: [],
        data2: [],
        roleList: [],

        roleData: [],
        checkChoose: [],
        checkChooseIds: [],
        // 选中的权限list
        permissionDataList: [],
        permissionByRoleId: [],
        // 组织
        vitroOrgan: {},
        // 体外案场
        vitroColumn: [],
        vitroHousesName: '',
        vitroFlag: false,
        optionsHouse: [],
        vitroBuild: {},
        vitroBuildCopy: {},
        caseOrgListAll: [],
        caseBuildingListAll: [],
        chooseBuild: [],
        currentIndex: '',
        select: {
          checkbox: {
            checkMethod: ({ row }) => {
              let _index = this.caseBuildingListAll.find((item) => {
                return item.id == row.housesId
              })
              if (!_index) {
                return true
              }
            }
          },
          change: (val) => {
            this.chooseBuild = val
          }
        },
        permissionDataListCopy: []
        // delOrgSopBinding: []
      }
    },
    watch: {
      messInfo(val) {
        this.messInfo = val
      }
    },
    mounted() {
      this.vitroColumn = vitroColumn.options(this)
    },
    created() {
      this.getRoles()
      this.usUserAuthGet()
    },
    methods: {
      chooseOrg(val) {
        console.log(val, '1')
        this.roleData[val.index].orgSopBindingVO[val.sopIndex].authOrgList = val.taskList1
        this.roleData[val.index].orgSopBindingVO[val.sopIndex].orgIds = val.chooseOrgVal.join(',')
        this.roleData.forEach((item) => {
          let hasOrg = []
          item.orgSopBindingVO.forEach((ovitem) => {
            hasOrg.push(ovitem.sopOrgId)
          })
          // 判断当前是不是积分组织
          item.orgList.forEach((orgListItem) => {
            let _index = hasOrg.indexOf(orgListItem.id)
            if (_index != -1) {
              orgListItem.hasOrgFlag = true

              // 判断当前积分组织有没有绑定其他
              let orgCurrent = null
              item.orgSopBindingVO.forEach((ovItem) => {
                if (ovItem.sopOrgId == orgListItem.id) {
                  orgCurrent = ovItem
                }
              })

              if (orgCurrent) {
                if (orgCurrent.authOrgList && orgCurrent.authOrgList.length > 0) {
                  orgListItem.block = false
                } else {
                  orgListItem.block = true
                }
              } else {
                orgListItem.block = true
              }
            } else {
              orgListItem.hasOrgFlag = false
            }
          })
        })
        this.$forceUpdate()
      },
      integralBj(index, sopIndex, val, sopOrgName) {
        // 1、当前角色的index ,
        //2、当前sop积分组织的index
        //3、当前sop积分组织下的可选的积分组织
        //3、当前sop积分组织的名称

        let setArr = [] //是积分组织组织
        this.roleData[index].orgList.forEach((item) => {
          if (item.hasOrgFlag) {
            setArr.push(item)
          }
        })
        // 有没有已经初始化的
        let currB = setArr.some((ii) => {
          return ii.id == this.roleData[index].myOrg.id
        })
        // 有没有已经初始化的积分组织添加进去
        if (!currB && JSON.stringify(this.roleData[index].myOrg) != '{}') {
          setArr.push(this.roleData[index].myOrg)
        }

        let otherIds = [] //其他的子级id
        this.roleData[index].orgSopBindingVO.forEach((roItem, roIndex) => {
          if (roIndex != sopIndex) {
            roItem.authOrgList &&
              roItem.authOrgList.length &&
              roItem.authOrgList.forEach((authItem) => {
                otherIds.push(authItem.id)
              })
          }
        })

        let fillterSetArr = []
        setArr.map((setItem) => {
          if (otherIds.indexOf(setItem.id) == -1) {
            fillterSetArr.push(setItem)
          }
        })
        let ids = []
        val &&
          val.length &&
          val.forEach((item) => {
            ids.push(item.id)
          })

        this.$refs.integralSet.show(fillterSetArr, ids, index, sopIndex, sopOrgName)
      },
      roleChoose(val, data, index) {
        data.roleVO.id = val.value
        data.roleVO.name = val.label

        // 角色改变时，获取角色的默认权限
        let params = {
          roleId: val.value
        }
        jurisdictionMgr.getPermissionsByRoleId(params).then((res) => {
          this.permissionByRoleId = res
          data.permissionIds = this.permissionByRoleId
          data.oldPermissionIds = JSON.parse(JSON.stringify(data.permissionIds))
        })
      },

      // 组织相关
      addOrgan(data, index) {
        this.vitroOrgan = data
        console.log(this.vitroOrgan, 'this.vitroOrgan')

        this.roleData.forEach((item) => {
          if (item.roleVO.id == this.vitroOrgan.roleVO.id) {
            this.caseOrgListAll = item.orgList
          }
        })
        console.log(this.roleData, 'this.roleData122')
        this.$refs.changeOrganiza.show(this.messInfo, this.vitroOrgan, this.caseOrgListAll)
      },

      setCancel(index, organ) {
        this.roleData[index].orgSopBindingVO.forEach((chid) => {
          console.log(chid, 'chid1')
          if (chid.authOrgList && chid.authOrgList.length > 0) {
            let currentAuChild = chid.authOrgList.find((auChild) => {
              return auChild.id == organ.id
            })
            let chIndex = chid.authOrgList.findIndex((auChild) => {
              return auChild.id == organ.id
            })
            console.log(currentAuChild, 'currentAuChild')
            if (chIndex != -1) {
              chid.authOrgList.splice(chIndex, 1)

              let ab = chid.orgIds.split(',')
              let abIndex = ab.findIndex((itemAb) => {
                return itemAb == currentAuChild.id
              })
              if (abIndex != -1) {
                ab.splice(abIndex, 1)
              }
              chid.orgIds = ab.join(',')
            }
          }
        })

        // this.roleData[val.index].orgSopBindingVO[val.sopIndex].orgIds =
        // val.chooseOrgVal.join(',')

        let hasOrg = []
        this.roleData[index].orgSopBindingVO.forEach((ovitem) => {
          hasOrg.push(ovitem.sopOrgId)
        })
        // 判断当前是不是积分组织
        this.roleData[index].orgList.forEach((orgListItem) => {
          let _index = hasOrg.indexOf(orgListItem.id)
          if (_index != -1) {
            orgListItem.hasOrgFlag = true

            // 判断当前积分组织有没有绑定其他
            let orgCurrent = null
            this.roleData[index].orgSopBindingVO.forEach((ovItem) => {
              if (ovItem.sopOrgId == orgListItem.id) {
                orgCurrent = ovItem
              }
            })

            if (orgCurrent) {
              if (orgCurrent.authOrgList && orgCurrent.authOrgList.length > 0) {
                orgListItem.block = false
              } else {
                orgListItem.block = true
              }
            } else {
              orgListItem.block = true
            }
          } else {
            orgListItem.hasOrgFlag = false
          }
        })
      },
      organRemove(val, organIndex, organ, index, sopVal) {
        let cuVO = this.roleData[index].orgSopBindingVO.find((aa) => {
          return aa.sopOrgId == organ.id
        })
        console.log(cuVO, 'mmm')
        if (cuVO) {
          this.roleData[index].delOrgSopBinding.push(cuVO.id)
        }

        // this.roleData[index].delOrgSopBinding.push(organ.id)
        val.splice(organIndex, 1)
        if (!organ.current) {
          let _ind = sopVal.findIndex((item) => {
            return item.sopOrgId == organ.id
          })
          if (_ind != -1) {
            sopVal.splice(_ind, 1)
          }
        }
        this.setCancel(index, organ)
        // this.roleData[index].orgSopBindingVO.forEach(chid=>{
        //     if(chid.authOrgList.length>0){
        //       let chIndex = chid.authOrgList.findIndex(auChild=>{
        //         return auChild.id == organ.id
        //       })
        //       if (chIndex != -1) {
        //         chid.authOrgList.splice(chIndex, 1)
        //       }
        //     }

        //   })
      },
      integralSetting(val, sopVal, index) {
        if (val.hasOrgFlag) {
          console.log(val, this.roleData[index].orgSopBindingVO, 'VO')

          let cuVO = this.roleData[index].orgSopBindingVO.find((aa) => {
            return aa.sopOrgId == val.id
          })

          if (cuVO) {
            this.roleData[index].delOrgSopBinding.push(cuVO.id)
          }

          val.hasOrgFlag = false
          let _ind = sopVal.findIndex((item) => {
            return item.sopOrgId == val.id
          })
          if (_ind != -1) {
            sopVal.splice(_ind, 1)
          }

          this.setCancel(index, val)

          // this.roleData[index].orgSopBindingVO.forEach(chid=>{
          //   if(chid.authOrgList.length>0){
          //     let chIndex = chid.authOrgList.findIndex(auChild=>{
          //       return auChild.id == val.id
          //     })
          //     if (chIndex != -1) {
          //       chid.authOrgList.splice(chIndex, 1)
          //     }
          //   }

          // })

          //   let hasOrg = []
          //   this.roleData[index].orgSopBindingVO.forEach((ovitem) => {
          //     hasOrg.push(ovitem.sopOrgId)
          //   })
          //   // 判断当前是不是积分组织
          //   this.roleData[index].orgList.forEach((orgListItem) => {
          //     let _index = hasOrg.indexOf(orgListItem.id)
          //     if (_index != -1) {
          //       orgListItem.hasOrgFlag = true

          //       // 判断当前积分组织有没有绑定其他
          //       let orgCurrent = null
          //       this.roleData[index].orgSopBindingVO.forEach((ovItem) => {
          //         if (ovItem.sopOrgId == orgListItem.id) {
          //           orgCurrent = ovItem
          //         }
          //       })

          //       if (orgCurrent) {
          //         if (
          //           orgCurrent.authOrgList &&
          //           orgCurrent.authOrgList.length > 0
          //         ) {
          //           orgListItem.block = false
          //         } else {
          //           orgListItem.block = true
          //         }
          //       } else {
          //         orgListItem.block = true
          //       }
          //     } else {
          //       orgListItem.hasOrgFlag = false
          //     }
          //   })
        } else {
          val.hasOrgFlag = true
          sopVal.push({
            orgIds: '',
            sopOrgId: val.id,
            sopOrgName: val.name
          })
        }
        this.$forceUpdate()
      },
      chooseOrgEvent(val) {
        val.block = true
        val.hasOrgFlag = false
        this.vitroOrgan.orgList.push(val)
        console.log(val, this.roleData, 'vvvvvvvuu')
        this.roleData.forEach((item) => {
          item.orgList.forEach((element) => {
            if (element.id == item.myOrg.id) {
              element.current = true
            }
          })
        })
      },
      onSuccess() {},
      // 体外案场
      addVitro(data, index) {
        this.currentIndex = index
        this.vitroBuild = data
        this.vitroBuildCopy = this.$tool.deepClone(this.vitroBuild)
        this.roleData.forEach((item) => {
          if (item.roleVO.id == this.vitroBuild.roleVO.id) {
            this.caseBuildingListAll.push(...item.buildingList)
          }
        })
        this.vitroFlag = true
        this.$refs.table.fetch()
      },
      buildRemove(val, id, caseFlag) {
        if (caseFlag) {
          let _index = val.findIndex((item) => item.id == id)
          if (_index != '-1') {
            val.splice(_index, 1)
          }
        } else {
          let _index1 = this.vitroBuildCopy.buildingList.findIndex((item) => item.id == id)
          if (_index1 != '-1') {
            this.vitroBuildCopy.buildingList.splice(_index1, 1)
          }

          let _index3 = this.caseBuildingListAll.findIndex((item) => item.id == id)
          if (_index3 != '-1') {
            this.caseBuildingListAll.splice(_index3, 1)
          }
        }
      },
      vitroCancel() {
        this.vitroFlag = false
      },
      vitroOk() {
        this.vitroFlag = false
        this.chooseBuild.forEach((item) => {
          this.vitroBuildCopy.buildingList.push({
            id: item.housesId,
            name: item.housesName
          })
        })
        this.roleData[this.currentIndex].buildingList = this.vitroBuildCopy.buildingList

        this.chooseBuild = []
        this.caseBuildingListAll = []
        this.vitroHousesName = ''
      },

      remoteMethodHouses(query) {
        if (query !== '') {
          caseMgr.getHousesNames({ housesName: query }).then((res) => {
            this.optionsHouse = res || []
          })
        } else {
          this.optionsHouse = []
        }
      },

      // 获取除了当前组织下的案场列表
      onFetch() {
        let params = {
          housesName: this.vitroHousesName //案场名称
        }
        let orgIdList = []
        this.caseOrgListAll.forEach((item) => {
          orgIdList.push(item.id)
        })
        params.orgIdList = orgIdList

        return caseMgr
          .externalHousesList(params)
          .then((res) => {
            this.total = res.total
            return res
          })
          .catch((err) => {
            this.total = 0
          })
      },
      vitroSearch() {
        this.$refs.table.fetch()
      },

      // unique(arr) {
      //   for (var i = 0, len = arr.length; i < len; i++) {
      //     for (var j = i + 1, len = arr.length; j < len; j++) {
      //       if (arr[i] === arr[j]) {
      //         arr.splice(j, 1);
      //         j--; // 每删除一个数j的值就减1
      //       }
      //     }
      //   }
      //   return arr;
      // },

      // 权限树数据
      jurisdictionSave() {
        if (
          this.roleData[this.jurisdictionCurrent].permissionIds &&
          this.roleData[this.jurisdictionCurrent].permissionIds.length
        ) {
          this.jurisdictionFlag = false
        } else {
          this.$Message.warning('权限不能为空')
        }
      },
      jurisdictionCancel() {
        //  this.getPermissionMenuList([])
        this.roleData[this.jurisdictionCurrent].permissionIds =
          this.roleData[this.jurisdictionCurrent].oldPermissionIds
        this.jurisdictionFlag = false
      },
      pcSelChange(val) {
        console.log(val, 'vvv')
        if (val && val.length) {
          this.permissionDataList = val
          if (this.permissionDataList.length) {
            this.permissionDataListCopy = []
            this.permissionDataList.forEach((item) => {
              this.permissionDataListCopy.push(String(item.id))
              this.roleData[this.jurisdictionCurrent].permissionIds = this.permissionDataListCopy
            })
          }
        } else {
          this.roleData[this.jurisdictionCurrent].permissionIds = []
          this.$Message.warning('权限不能为空')
        }
      },
      getPermissionMenuList(permissionIds) {
        jurisdictionMgr
          .permissionMenuList()
          .then((res) => {
            this.data2 = res
            this.recursionTree(this.data2, permissionIds)
          })
          .catch((err) => {
            this.$Message.error(err)
          })
      },
      jurisdictionEidt(data, index) {
        console.log(data, '5555')
        this.jurisdictionFlag = true
        this.jurisdictionCurrent = index
        if (this.permissionByRoleId && this.permissionByRoleId.length) {
          data.permissionIds = this.permissionByRoleId
          this.getPermissionMenuList(this.permissionByRoleId)
        } else {
          this.getPermissionMenuList(data.permissionIds)
        }
        data.oldPermissionIds = JSON.parse(JSON.stringify(data.permissionIds))
      },

      recursionTree(arr, ids) {
        arr.forEach((item) => {
          if (ids.includes(String(item.id)) || ids.includes(Number(item.id))) {
            this.$set(item, 'checked', true)
          } else {
            this.$set(item, 'checked', false)
          }
          if (item.children && item.children.length > 0) {
            this.recursionTree(item.children, ids)
          }
        })
      },

      // 获取后台角色列表
      getRoles() {
        let params = {}
        roleMgr.roleNameList(params).then((res) => {
          this.roleList = res.filter((item) => {
            return item.roleType == 2
          })
        })
      },
      // 获取用户角色合集
      usUserAuthGet() {
        let params = {
          userId: this.messInfo.userId
        }
        organApi.usUserAuth(params).then((res) => {
          if (res && res.length > 0) {
            this.roleData = res

            // 1、不是积分组织的             显示
            // 2、是积分组织，下边没有绑定的  显示
            // 3、是积分组织，下边有绑定的    不显示
            this.roleData.forEach((item) => {
              item.delOrgSopBinding = []

              let hasOrg = []
              item.orgSopBindingVO.forEach((ovitem) => {
                hasOrg.push(ovitem.sopOrgId)
              })

              // 判断当前是不是积分组织
              item.orgList.forEach((orgListItem) => {
                if (orgListItem.id == item.myOrg.id) {
                  orgListItem.current = true
                }
                let _index = hasOrg.indexOf(orgListItem.id)
                if (_index != -1) {
                  orgListItem.hasOrgFlag = true

                  // 判断当前积分组织有没有绑定其他
                  let orgCurrent = null
                  item.orgSopBindingVO.forEach((ovItem) => {
                    if (ovItem.sopOrgId == orgListItem.id) {
                      orgCurrent = ovItem
                    }
                  })

                  if (orgCurrent) {
                    if (orgCurrent.authOrgList && orgCurrent.authOrgList.length > 0) {
                      orgListItem.block = false
                    } else {
                      orgListItem.block = true
                    }
                  } else {
                    orgListItem.block = true
                  }
                } else {
                  orgListItem.hasOrgFlag = false
                  orgListItem.block = true
                }
              })
            })
            this.checkChoose = []
          } else {
            this.roleData = []
          }
        })
      },
      checkChange(val) {
        this.checkChooseIds = []
        this.roleData.forEach((item, index) => {
          if (this.checkChoose.indexOf(index) != -1 && item.id != '') {
            this.checkChooseIds.push(item.id)
          }
        })
      },
      // 删除用户角色
      delRole() {
        this.$Modal.confirm({
          title: '删除',
          content: '你确认删除么？',
          closable: true,
          onOk: () => {
            let params = {
              ids: this.checkChooseIds.join(',')
            }
            roleMgr.deleteByIds(params).then((res) => {
              this.$Message.success('删除成功。')
              this.usUserAuthGet()
            })
          },
          onCancel: () => {
            this.$Message.success('你取消了删除。')
          }
        })
      },
      // 新增
      createRole() {
        this.roleData.push({
          buildingList: [],
          orgList: [],
          roleVO: {
            id: '',
            name: ''
          },
          permissionIds: [],
          id: '',
          orgSopBindingVO: [],
          myOrg: {},
          delOrgSopBinding: []
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .backRole {
    .roleBtn {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    .noData {
      text-align: center;
      padding: 30px 0;
      color: #999;
    }

    .roleList {
      max-height: 400px;
      overflow-y: auto;
      margin-top: 10px;

      .roleListCon {
        display: flex;
        flex-direction: row;
        width: 800px;
        padding: 20px 0;
        border-bottom: 1px #e8eaec solid;
      }

      .roleListCon:last-child {
        border-bottom: none;
      }

      em {
        font-style: normal;
        color: #2b85e4;
        margin-left: 10px;
        cursor: pointer;
      }

      i {
        font-style: normal;
        color: #2b85e4;
        cursor: pointer;
      }
    }
  }

  .organBox {
    display: flex;
    flex-direction: row;
  }

  .tree {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 10px;
  }

  .vitroSearch {
    display: flex;
    flex-direction: row;
    width: 300px;
    padding: 0 0 20px;
  }

  .transferFooter {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }

  .chooseCase {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
  }

  .checkKuang {
    padding-left: 10px;
    padding-top: 8px;
  }

  .integralBox {
    border: 1px solid #e8e8e8;
    padding: 10px;
    margin-top: 10px;

    .integralTit {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #e8e8e8;

      span {
        color: #2b85e4;
        cursor: pointer;
      }
    }

    .integralCon {
      display: flex;
      flex-direction: column;
    }
  }
</style>
